<template>
    <div class="app-container">
      <el-button
        icon="Plus"
        type="primary"
        size="small"
        @click="add"
        v-hasPermi="['member:mpBanner:add']"
        >新增</el-button
      >
      <h3></h3>
      <x-table :propList="propList" :tableData="tableData">
        <template #img="{ row }">
          <el-image
            :src="row.img_url_show"
            style="width: 200px; height: 100px"
            :preview-src-list="[row.img_url_show]"
          ></el-image>
        </template>
        <template #status="{ row }">
          <el-tag type="success" v-if="row.status == 1"> 启用 </el-tag>
          <el-tag type="danger" v-else> 禁用 </el-tag>
        </template>
        <template #op="{ row }">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="changeBanner(row)"
            v-hasPermi="['member:mpBanner:change']"
            >修改</el-button
          >
          <el-button
            type="primary"
            link
            icon="Delete"
            @click="delBanner(row)"
            v-hasPermi="['member:mpBanner:del']"
            >删除</el-button
          >
        </template>
      </x-table>
      <Dialog
        width="50%"
        :title="dialogConfig.title"
        v-model:isShowDialog="isShowDialog"
        @confirm="submit"
      >
        <Form ref="formRef" v-bind="dialogConfig.formConfig">
          <template #path v-if="isShowDialog">
            <!-- <el-form-item label="图片" label-width="100px" prop="path"> -->
            <!-- <ImgUpload
                width="400"
                :value="dialogConfig.formConfig.formData.img_url_show"
                @input="imgSuccess"
                @remove="remove"
                :limit="1"
              ></ImgUpload> -->
            <!-- {{ dialogConfig.formConfig.formData.img_url_show }} -->
            <ImageUpload
              :uploadImgUrl="uploadImgUrl"
              v-model="dialogConfig.formConfig.formData.img_url_show"
              @input="imgSuccess"
              :limit="1"
            >
              <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
              <template #tip>
                <div class="el-upload__tip">
                  只能上传jpg,png,jpeg,gif文件，且不超过500kb
                </div>
              </template>
            </ImageUpload>
            <span
              >支持png、jpeg、jpg,gif格式,推荐使用长方形的图片,尺寸:750*300</span
            >
            <!-- </el-form-item> -->
          </template>
        </Form>
      </Dialog>
    </div>
  </template>
  
  <script>
  import ImgUpload from "@/components/ImageUpload";
  import { uploadImgUrl } from "@/api/mpManage/mpUpload";
  import { dialogConfig, propList, defaultFormData } from "./config";
  import {
    getList as getBannerList,
    change as changeBanner,
    del as delBanner,
    add as addBanner,
  } from "@/api/platform/mpBanner";
  const baseUrl =
    import.meta.env.VITE_APP_ENV == "development"
      ? import.meta.env.VITE_APP_BASE_API
      : window.location.origin;
  export default {
    name: "mpBanner",
    components: {
      ImgUpload,
    },
    data() {
      return {
        uploadImgUrl,
        dialogConfig,
        propList,
        isShowDialog: false,
        tableData: [],
        searchInfo: {
          page: 1,
          pageSize: 10,
        },
      };
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        this.getInfo();
      },
      async getInfo() {
        const { data } = await getBannerList();
  
        data.items.forEach((item) => {
          item.img_url_show = baseUrl + "/" + item.path;
        });
        this.tableData = data.items;
      },
      delBanner(item) {
        this.$modal
          .confirm("是否确认删除？")
          .then(function () {
            return delBanner(item.id);
          })
          .then(() => {
            this.getInfo();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      imgSuccess(res) {
        if (res.code == 200) {
          this.dialogConfig.formConfig.formData.img_url_show =
            baseUrl + "/" + res.data.url;
          // 传给后端的
          this.dialogConfig.formConfig.formData.path = res.data.url;
        }
      },
      remove() {
        this.dialogConfig.formConfig.formData.path = "";
        this.dialogConfig.formConfig.formData.img_url_show = "";
      },
      add() {
        this.isShowDialog = true;
        this.dialogConfig.formConfig.formData = { ...defaultFormData };
        this.dialogConfig.formConfig.formData.path = "";
        this.dialogConfig.formConfig.formData.img_url_show = "";
        this.$nextTick(() => {
          this.$refs.formRef.resetFields();
        });
      },
      changeBanner(item) {
        item.img_url_show = baseUrl + "/" + item.path;
        this.dialogConfig.formConfig.formData = { ...item };
        this.isShowDialog = true;
      },
      submit() {
        console.log(this.dialogConfig.formConfig.formData);
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            console.log(this.dialogConfig.formConfig.formData);
            const formData = this.dialogConfig.formConfig.formData;
            if (formData.id) {
              await changeBanner(formData);
            } else {
              await addBanner(formData);
            }
            this.$message.success("操作成功!");
            this.isShowDialog = false;
            this.getInfo();
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  